<template>
  <div class="adminqianming">
    <admin_top></admin_top>
    <div style="padding: 0 20px;">

      <div style="padding:20px 0 " >

          <el-select clearable  style="width:180px" v-model="all2.is_invoice"
            placeholder="请选择类型">
            <el-option label="未开票" value="0"></el-option>
            <el-option label="已开票" value="1"></el-option>
          </el-select>
          <el-date-picker
            v-model="timeline"
            @change="changetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button @click="getlist"  type="danger">搜索</el-button>
      </div>





      <el-button style="margin-bottom: 20px;" @click="biaoji" size="small" type="danger">标记为已开票</el-button>
      <el-table :data="tableData" style="text-align: center;" align="center" border :loading="loading" @selection-change="handleSelectionChange" ref="multipleTable">
        <el-table-column
              type="selection"
              width="55">
            </el-table-column>
        <el-table-column label="订单编号">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付时间">
          <template slot-scope="scope">
            <span>{{ scope.row.pay_time }}</span>
          </template>
        </el-table-column>

        <el-table-column label="消费类型">
          <template slot-scope="scope">
            <span>{{ scope.row.consumption_type }}</span>
          </template>
        </el-table-column>

        <el-table-column label="金额">
          <template slot-scope="scope">
            <span>{{ scope.row.total }}</span>
          </template>
        </el-table-column>

        <el-table-column label="是否开票">
          <template slot-scope="scope">
            <span v-if="scope.row.is_invoice == 1">已开票</span>
            <span v-if="scope.row.is_invoice != 1">未开票</span>
          </template>
        </el-table-column>

        <el-table-column label="发票地址">
          <template slot-scope="scope">
            <span>{{ scope.row.invoice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发票扣点">
          <template slot-scope="scope">
            <span>{{ scope.row.points }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开票时间">
          <template slot-scope="scope">
            <span>{{ scope.row.invoice_time }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.is_invoice != 1" @click="shangchuan(scope.row.id,scope.row.total)">发票上传</el-button>
            <el-button type="text" v-if="scope.row.is_invoice == 1" @click="chakan(scope.row.invoice,scope.row.total,scope.row.points)">查看发票</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


      <el-dialog title="上传发票" :visible.sync="log" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
        <div>开票金额：{{ this.all.amount }}</div>
        <div style="display: flex;align-items: center;margin-top: 10px;">
          <div>发票扣点：</div>
          <el-input @input="changekd" style="width: 100px;margin-left: 10px;margin-right: 10px;"  v-model="all.points" type="number" :min="0" ></el-input>
          <div>%</div>
          <div style="margin-left: 20px;color: black;">计：{{ jisuanmoney }}</div>
          <div style="margin-left: 20px;color: #5C5C5C;">{{ resmoney }}</div>
        </div>
        <div style="display: flex;align-items: center;margin-top: 10px;">
          <div>上传发票：</div>
          <chuantu v-if="log" style="margin-left: 10px;" ref="chuantu" @getimg="getimg"></chuantu>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" :disabled="is_chongzu_code" @click="shenhe">确定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="发票查看" :visible.sync="log2" width="1200px" :close-on-click-modal="false" :close-on-press-escape="false">
        <div>开票金额：{{ this.all.amount }}</div>
        <div style="display: flex;align-items: center;margin-top: 10px;">
          <div>发票扣点：</div>
          <el-input disabled style="width: 100px;margin-left: 10px;margin-right: 10px;"  v-model="all.points" type="number" ></el-input>
          <div>%</div>
          <div style="margin-left: 20px;color: black;">计：{{ jisuanmoney }}</div>
        </div>
        <div style="display: flex;align-items: center;margin-top: 10px;">
          <div>上传发票：</div>
        </div>
        <img :src="urls" style="max-width: 100%;">
        
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="log2 = false">关闭</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
  import admin_top from './top.vue';
  import axios from 'axios'
  import chuantu from "../zujian/chuantu.vue";
  export default {
    components: {
      admin_top,chuantu
    },
    name: 'adminqianming',
    data() {
      return {
        all2: {
          name:"",
          is_invoice:"",

        },
        tableData: "",
        total: "",
        loading: true,
        multipleSelection: [],
        log:false,
        all:{
          ids:[], 
          invoice:"",
          points:6,
          amount:0,
          shop_id:this.$route.query.id
        },
        log2:false,
        urls:"",
        timeline:[],
        jisuanmoney:'',
        resmoney:'',
        is_chongzu_code:''
      }
    },
    watch: {

    },
    computed: {

    },
    created() {
      this.getlist()
    },
    methods: {
      //选择时间
      changetime(e){
        console.log(e)
        
      },
      //修改发票扣点
      changekd(e){
        console.log(e)
        if(e==''){
          this.all.points = 0
        }
        this.isyue()
      },
      //计算是否有余额
      isyue(){
        axios.get('/api/plan-market/admin/point/amount/check',{
          params:{
            amount:this.all.amount,
            points:this.all.points,
            shop_id:this.$route.query.id
          }
        })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log(response.data)
              this.jisuanmoney = response.data.data.point_amount
              
              if(response.data.data.is_submit==1){
                this.resmoney = '余额不足，当前余额'+response.data.data.user_balance
                this.is_chongzu_code = true
              }else{
                this.resmoney = '余额充足'
                this.is_chongzu_code = false
              }
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      chakan:function(url,money,points){
        this.all.amount =money
        this.urls = url
        this.log2 = true
        this.all.points = points
        this.isyue()
      },
      biaoji:function(){
        if(this.multipleSelection == ''){
          this.$message.error('请先选择订单');
          return false
        }
        this.all.ids = []
        this.all.points = 6
        this.all.amount = 0
        this.all.invoice =''
        this.multipleSelection.forEach(item=>{
          this.all.ids.push(item.id)
          
          
          this.all.amount = this.addNum(this.all.amount,item.total)
        })

        this.isyue()
        this.log = true
      },
      
      shangchuan:function(id,money){
        this.all.amount =money
        this.all.invoice =''
        this.all.ids = [id]
        this.all.points = 6
        this.log = true
        this.isyue()
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getimg:function(img){
        this.all.invoice = img
      },
      shenhe: function() {
        axios.post('/api/plan-market/admin/upload/invoice',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('已上传');
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //获取全部
      getlist: function() {
        console.log(this.timeline)
        if(this.timeline==null){
          this.timeline = []
        }
        var that = this
        axios.get('/api/plan-market/admin/shop/consumption/list?shop_id='+this.$route.query.id+'&is_invoice='+this.all2.is_invoice+'&start='+this.timeline[0]+'&end='+this.timeline[1])
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data

              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //自定义加法运算
      addNum(arg1, arg2) {
        var r1, r2, m, c;
        try {
          r1 = arg1.toString().split(".")[1].length;
        } catch (e) {
          r1 = 0;
        }
        try {
          r2 = arg2.toString().split(".")[1].length;
        } catch (e) {
          r2 = 0;
        }
        c = Math.abs(r1 - r2);
        m = Math.pow(10, Math.max(r1, r2));
        if (c > 0) {
          var cm = Math.pow(10, c);
          if (r1 > r2) {
            arg1 = Number(arg1.toString().replace(".", ""));
            arg2 = Number(arg2.toString().replace(".", "")) * cm;
          } else {
            arg1 = Number(arg1.toString().replace(".", "")) * cm;
            arg2 = Number(arg2.toString().replace(".", ""));
          }
        } else {
          arg1 = Number(arg1.toString().replace(".", ""));
          arg2 = Number(arg2.toString().replace(".", ""));
        }
        return (arg1 + arg2) / m;
      },
    },

  }
</script>

<style scoped>
  .adminqianming {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;
  }
</style>
